﻿<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->

    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/css/themes/default/jquery.mobile-1.2.1.css" />
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/docs/_assets/css/jqm-docs.css" />
    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://demos.jquerymobile.com/1.2.1/docs/_assets/js/jqm-docs.js"></script>
    <script src="http://demos.jquerymobile.com/1.2.1/js/jquery.mobile-1.2.1.js"></script>



</head>


<body>

    <div data-role="page" id="page2">

        <script>
            $(document).on('pagebeforeshow', '#page2', function () {

                $.mobile.loading('show', {
                    text: 'Loading......',
                    textVisible: true,
                    theme: 'a',
                    html: ""
                });

                setTimeout(function () {
                    $.mobile.loading('show');
                }, 100000);

                setTimeout(function () {
                    //$('#someid').addClass("done");
                    alert("done.....");
                    $.mobile.hidePageLoadingMsg();
                }, 2000);

                $.mobile.loading('hide');
                setTimeout(function () {
                    $.mobile.loading('hide');
                }, 1);

            });
        </script>




        <div data-role="header" data-theme="b">
            <h1>Kansas Test Driving Exam - Motorcycle</h1>
            <p style="color: green;">Current Score: 100%</p>
        </div><!-- /header -->

        <div data-role="content">

            <p> Hello </p>
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed" data-theme="b">
        </div><!-- /content -->

    </div><!-- /page -->

</body>
</html>